<template>
	<view class="listcontent container">
		<view class="contelis">
			<view class="titles">
				分类管理
				<view class="backs" @click="backgs"> <返回</view>
			</view>
			<view class="searcher">
				<view class="categray" style="flex: none; width: 300px; display: flex; padding-top: 10px;">
					<u-button @click="gotoaddcate">添加分类</u-button>
				</view>
			</view>
			<view class="tables">
				<u-table>
					<u-tr>
						<u-th>编号</u-th>
						<u-th>分类</u-th>
						<u-th>操作</u-th>
					</u-tr>
					<u-tr v-for="(item,index) in clists" :key="index">
						<u-td>{{index+1}}</u-td>
						<u-td>{{item.cname}}</u-td>
						<u-td>
							<view style="display: flex; justify-content: center;" class="textu">
								<text style="margin-right: 20px;"><u-icon name="edit-pen"  @click='editee(item)'></u-icon></text>
								<text><u-icon name="trash" @click='delects(item.Id)'></u-icon></text>
							</view>
						</u-td>
					</u-tr>
				</u-table> 
			</view> 
			
		</view>
		
		<u-modal v-model="show" @confirm="confirm" style="text-align: center; padding: 20px 0;" :show-cancel-button="true" >确定要删除吗</u-modal>
	</view>
</template>

<script>
	import api from '../../api/api.js';
	export default {
		data() {
			return {
				clists:[],
				show:false
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.autoplays();
		},
		methods: {
			backgs(){
				
						uni.navigateTo({
							url:'/pages/index/index'
						})
			},
			gotoaddcate(){
				uni.navigateTo({
					url:"/pages/manage/addcategroy"
				})
			},
			autoplays(){
				api.clist().then((res)=>{
					console.log(res);
					this.clists=res.data;
				})
			},
			delects(obj){
				console.log(obj);
				this.show = !this.show;
				uni.setStorageSync('id',obj);
			},
			confirm(){
				const datas={
					Id:uni.getStorageSync('id')
				};
				api.del(datas).then((res)=>{
					console.log(res);
					uni.showToast({
						title:res.msg,
						icon: 'none',
					});
					this.autoplays();
				    this.show = !this.show;
				})
			},
			editee(obj){
				console.log(obj);
				uni.navigateTo({
					url:'/pages/manage/editcategroy?data='+encodeURIComponent(JSON.stringify(obj))
				})
			}
		}
	}
</script>

<style>
	@import "./editor-icon.css";
	.listcontent{background: #27ae60; width: 100%; overflow-y:scroll; height: 100vh; ;}
	.contelis{ width: 900px; margin: 0 auto; background-color: #fff; height: 100vh; overflow-y: scroll;}
	.titles{  background-color: #ccc; height: 150px; line-height: 150px;text-align: center; font-size: 20px; position: relative;}
	.backs{ position: absolute; left: 50px; top: 20px; font-size: 18px; height: 30px; line-height: 30px;}
	.addblog{ background-color: #eee; width:100%; min-height: 200px;}
	.tables{ margin-top: 20px;}
</style>
